<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model="form"
        :page="page"
        :data="tableData"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        :search.sync="searchForm"
        :upload-error="uploadError"
        :before-close="beforeClose"
        @search-change="searchChange"
        @search-reset="searchReset"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @rowEdit="listenEdit"
        @row-save="handleSave"
        @row-del="rowDel"
      >
        <template  slot-scope="{ type, size, row }" slot="menu">
          <el-button
          icon="el-icon-info"
          :size="size"
          :type="type"
          @click="excel(row)">导出签到表</el-button>
<!--          <el-button-->
<!--            icon="el-icon-view"-->
<!--            :size="size"-->
<!--            :type="type"-->
<!--            @click="goscoreset(row)"-->
<!--          >111-->
<!--          </el-button-->
<!--          >-->


          <el-button
            icon="el-icon-info"
            :size="size"
            :type="type"
            @click="sign(row)">
            查看未签到人员
          </el-button>

        </template>
        <template slot="totle" slot-scope="scope">
          <el-tag v-if="scope.row.type == 2">个人</el-tag>
          <el-tag v-if="scope.row.type == 1">官方</el-tag>
          {{ scope.row.totle }}
        </template>
        <template slot-scope="{ disabled, size }" slot="signTimeSearch">
          <el-date-picker
            v-model="filterTime"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </template>
      </avue-crud>
    </basic-container>

    <el-drawer
      :visible.sync="dialogPermissionVisible"
      :close-on-click-modal="false"
      title="查看"
    >
      <div class="dialog-setscore">
        <div>
          <div style="font-size:24px;margin-bottom:20px">活动标题</div>
          <div class="originator">
            <div class="originator-img">
              <img src="img/logo1.png" alt="">
            </div>
            <div class="originator-right">
              <div style="margin-bottom:10px">
                发起人：
              </div>
              <div>
                管理员
              </div>
            </div>
          </div>
          <div class="address">
            活动地址：15445455
          </div>
          <div class="address">
            活动时间：54151515
          </div>
          <div class="address">
            活动类型：54541541
          </div>
        </div>
        <div class="content">
          <div class="content-one">
            <div class="content-top">
              活动人数
            </div>
            <div class="content-bot">
              999
            </div>
          </div>
          <div class="content-one">
            <div class="content-top">
              活动人数
            </div>
            <div class="content-bot">
              999
            </div>
          </div>
          <div class="content-one">
            <div class="content-top">
              活动人数
            </div>
            <div class="content-bot">
              999
            </div>
          </div>
        </div>
        <avue-crud
          ref="crud2"
          :page="page1"
          :data="tableData1"
          :table-loading="tableLoading"
          :option="tableOption1"
          @on-load="getList1"
        >
        </avue-crud>
      </div>
    </el-drawer>




    <el-drawer

      :visible.sync="signVisible"
      :close-on-click-modal="false"
      title="修改签到人员状态"
    >
      <el-table
        ref="multipleTable"
        :data="signData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;margin-left:20px;">
        <el-button @click="toggleSelection()">已签到</el-button>
      </div>




    </el-drawer>








  </div>
</template>
<style>
  .el-dialog{
    width: 80%;
    background: #fff;
  }
  .originator{
    display:flex;
    align-items:center;
    margin-bottom: 20px;
  }
  .originator-img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }
  .originator-img img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .originator-right{
    font-size: 16px;
  }
  .address{
    font-size: 16px;
    display: inline;
    margin-right: 30px;
  }
  .content{
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .content-one{
    width: 25%;
    height: 200px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px -5px rgba(9, 9, 9, .3);
  }
  .content-top{
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    margin-top: 50px;
  }
  .content-bot{
    text-align: center;
    font-size: 24px;
    margin-top: 50px;
  }
</style>
<script>
import { fetchList,fetchList1, getObj, addObj, putObj, delObj,noSignPeople,updateSignState } from '@/api/circleactivity'
import { tableOption, tableOption1 } from '@/const/crud/circleactivity'
import { mapGetters } from 'vuex'
import AvueUeditor from 'avue-plugin-ueditor'
import {baseUrl} from "../../../config/env";
export default {
  name: 'circleactivity',
  data() {
    return {
       dialogFlag:false,
      filterTime: [],
      multipleSelection: [],
      signData:[],
      form: {},
      searchForm: {},
      tableData: [],
      tableData1: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      page1: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      tableLoading1: false,
      tableOption1: tableOption1,
      dialogPermissionVisible: false,
      signVisible:false
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.circleActivity_circleactivity_add, false),
        delBtn: this.vaildData(this.permissions.circleActivity_circleactivity_del, false),
        editBtn: this.vaildData(this.permissions.circleActivity_circleactivity_edit, false)
      };
    }
  },
  watch: {
    'form.type':{
      handler(val){
        var isTourists =this.findObject(this.tableOption.column,'isTourists')
        if(val === 1){
          isTourists.display = true
        }
        if(val === 2){
          isTourists.display = false
        }
      }
    },
    'form.isNumberLimit': {
      handler(val) {
        var peopleNumObj = this.findObject(this.tableOption.column, 'peopleNum')
        var outsidersNum = this.findObject(this.tableOption.column, 'outsidersNum')
        if (val === 1) {
          //开启
          peopleNumObj.display = true
          peopleNumObj.rules = [{
            required: true,
            message: "请选择会员限制人数",
            trigger: "blur"
          }, {
            validator: (rule, value, callback) => {
              if (value < 1) {
                callback(new Error('会员限制人数必须大于0'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }]
          outsidersNum.display = true
          outsidersNum.rules = [{
            required: true,
            message: "请选择游客限制人数",
            trigger: "blur"
          }, {
            validator: (rule, value, callback) => {
              if (value < 1) {
                callback(new Error('游客限制人数必须大于0'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }]
        } else {
          //关闭
          peopleNumObj.display = false;
          peopleNumObj.rules = [];
          outsidersNum.display = false;
          outsidersNum.rules = [];
        }
      },
      immediate: true
    },
  },
  methods: {
     beforeClose(done){
            if(this.dialogFlag == true){
                done()
            }
            if(this.dialogFlag == false){
                this.$confirm("可能有未保存的数据，是否关闭", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(data => {
                    done()
                }).catch(_ => {
                        // done()
                });
            }
        
    },
    listenEdit(row, index) {
      var peopleNumObj = this.findObject(this.tableOption.column, 'peopleNum')
      var outsidersNum = this.findObject(this.tableOption.column, 'outsidersNum')
      if (row.isNumberLimit === 1) {
        //开启
        peopleNumObj.display = true
        peopleNumObj.rules = [{
          required: true,
          message: "请选择是否限制",
          trigger: "blur"
        }, {
          validator: (rule, value, callback) => {
            if (value < 1) {
              callback(new Error('会员限制人数必须大于0'));
            } else {
              callback();
            }
          }, trigger: 'blur'
        }]
        outsidersNum.display = true
        outsidersNum.rules = [{
          required: true,
          message: "请选择是否限制",
          trigger: "blur"
        }, {
          validator: (rule, value, callback) => {
            if (value < 1) {
              callback(new Error('游客限制人数必须大于0'));
            } else {
              callback();
            }
          }, trigger: 'blur'
        }]
      } else {
        //关闭
        peopleNumObj.display = false;
        peopleNumObj.rules = [];
        outsidersNum.display = false;
        outsidersNum.rules = [];
      }
    },
    getList(page, params) {
      this.tableLoading = true
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        var records = response.data.data.records;
        //数据转换
        records.map(r => {
          if (r.activityStartTime && r.activityEndTime) {
            r.activityTime = [r.activityStartTime, r.activityEndTime];
          }
          if (r.signStartTime && r.signEndTime) {
            r.signTime = [r.signStartTime, r.signEndTime];
          }
          if (r.positioning) {
            var jwArr = r.positioning.split(',');
            jwArr.push(r.address);
            r.address = jwArr;
          }
          if (r.label) {
            r.label = r.label.split(',');
          }
          return r;
        })

        this.tableData = records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除活动名为：' + row.totle, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function (row, index, done, loading) {
      //数据转换
      row.positioning = row.address[0] + ',' + row.address[1];
      row.address = row.address[2];
      if (row.label){
        row.label = row.label.join(',');
      }
      if (row.isNumberLimit === 2) {
        row.peopleNum = 0;
      }
      putObj(row).then(data => {
        this.$message.success('修改成功')
        this.dialogFlag = true
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
      setTimeout(()=>{
          this.dialogFlag = false
      },500)
    },
    handleSave: function (row, done, loading) {
      //数据转换
      row.positioning = row.address[0] + ',' + row.address[1];
      row.address = row.address[2];
      // row.label = row.label.join(',');
      // if (row.isNumberLimit === 2) {
      //   row.peopleNum = 0;
      // }
      addObj(row).then(data => {
        this.$message.success('添加成功')
        this.dialogFlag = true
        done()
        this.getList(this.page)
      }).catch(() => {
        loading();
      });
      setTimeout(()=>{
          this.dialogFlag = false
      },500)
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      var filterTime = this.filterTime;
      
      if(filterTime != null){
        if (filterTime.length > 0) {
          this.searchForm.signStartTime = filterTime[0];
          this.searchForm.signEndTime = filterTime[1];
        }
      }
      delete this.searchForm.signTime;
      this.searchForm = { ...this.searchForm, ...form }
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    searchReset() {
      this.searchForm = {};
      this.filterTime = [];
      this.refreshChange();
    },
    refreshChange() {
      this.getList(this.page)
    },
    excel(row) {
        window.open(baseUrl + "/circleactivity/exportExcel?activityId="+row.id);

    },
    getList1(page, params) {
        this.tableLoading1 = true
        var params = params ? params : {}
        params.dynamic = this.rowid
        fetchList1(Object.assign({
            current: page.currentPage,
            size: page.pageSize
        }, params, this.searchForm1)).then(response => {
            this.tableData1 = response.data.data.records
            this.page1.total = response.data.data.total
            this.tableLoading1 = false
        }).catch(() => {
            this.tableLoading1 = false
        })
    },
    goscoreset(row) {
        this.dialogPermissionVisible = true
        var dic = {id: row.id}
        this.getList1(this.page1, dic)
    },

    //
    toggleSelection(rows) {
      console.log(this.multipleSelection);
      updateSignState(this.multipleSelection).then(res=>{
        this.$message.success('修改成功')
        this.signVisible = false
      }).catch(()=>{
        this.$message.success('修改失败')
      })


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    sign(row){
      this.signVisible = true;
      let id = row.id
      this.getSignData(id)
    },


    getSignData(obj){
      noSignPeople(obj).then(res=>{
       this.signData = res.data.data.records
      })
    },

    uploadError(error,column){
      this.$message.error('图片过大，上传失败')
    }



  }


}
</script>
